<template>
	<view class="">
		<cu-custom bgColor="" :isBack="true" textRight="false" type="">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>


		<!--  订单搜索的开始 -->
		<view class="search-boxes" @click="searchGoods()" id="search">
			<view class="input-search-box1 ">
				<input class="inputSearch1" type="text" disabled="disabled" placeholder="平台优选好货" />
				<text class="cuIcon-search iconsousuo" style="right: 0;"></text>
			</view>
		</view>
		<!--  订单搜索的结束 -->

		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">



			<!--  推荐商品 -->

			<scroll-view :scroll-x="true" :scroll-y="false" class="scrollX-box" v-if="shop.recommend_num>0">

				<view class="scrollX-box1 flex justify-between  bg-white" v-for="(item,index) in shop.recommend"
					:key="index" @click="jumpTo(item)">
					<view class="left-shop">
						<view class="scroll-title ">
							{{item.goods_name}}
						</view>

						<view class="text-price text-red  text-cut">
							{{item.price*item.discount}}
							<text class="text-discount s-pass-price" v-if="item.discount!=1">{{item.price}}</text>
						</view>

						<view class="button  flex justify-between">
							<text class="text-gray">销量：{{item.sold_num || 0}}</text>
							<view class="cu-tag1 bg-red middle" v-if="item.discount!=1"> {{item.discount*10}}折</view>
						</view>


					</view>
					<view class="right-box ">
						<image :src="item.goods_thumbs[0]" mode="scaleToFill"></image>
					</view>


				</view>
			</scroll-view>
			<!--  推荐商品 -->
			

			<!--  商品列表 -->
			<view class="shop-box ">
				<view class="shop-bar1 screen " :class="{'nav-fixed2':is_fixed==1,'fade-in-shop':is_fixed==1}"
					:style="{'top':is_fixed==1?(StatusBar.height+StatusBar.top)+'px':'0px'}">
					<scroll-view :scroll-x="true" class="shop-bar1 scroll-view ">
                        <view class="viewLeft">
                        	
                        </view>
						<view class="shop-bar1-view  " v-for="(item,index) in typeArr" :key="index"
							:class="sort_type==index?'tabhover':'tabnohover'" @click="changeTab(index)">
							{{item.name}}
						</view>
					
						
					</scroll-view>
				</view>
				<Waterfall :goodsList='goods' @clickItem="jumpTo"></Waterfall>
			</view>
			<!--  商品列表 -->


			<view class="foot">

			</view>
		</scroll-view>

	</view>

</template>

<script>
	import Waterfall from "@/components/waterfall.vue";
	export default {
		name: "shopHome",
		components: {
			Waterfall,

		},
		data() {
			return {
				StatusBar: this.Custom,
				title: "好货",
				sort_type: 0,
				is_fixed: 0,
				swiperHeight: '',
				list: [],
				typeArr: [],
				shop: [],
				goods: [],

			}
		},
		props: {
			params: {
				type: Number,
				default: null
			}
		},
		watch: {
			params(val) {
				console.log("val " + val);
				this.params = val;
				this.shop_id = val;
				this.getshop(this.shop_id);
			}
		},
		mounted() {


			this.getInfo().then((e) => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#search').boundingClientRect(data => {
					this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height) - 50 - data
						.height;
				}).exec();
			});

		},

		methods: {
			/**
			 * 获取商店店铺信息
			 * @param {Object} id
			 */
			getshop(id) {
				this.apiRequest('/buyer/shopInfo', {
					shop_id: id,
				}, 1).then(res => {

					this.shop = res.data;
					for (let i in this.shop.goods) {
						let dat = {
							name: this.shop.goods[i].cate_name,
							id: this.shop.goods[i].cate_id
						}
						this.typeArr.push(dat)
					}
					this.changeTab(0);


				})
			},

			/**
			 * 筛选
			 */
			changeTab(type) {
				this.sort_type = type;
				let dat = this.shop.goods[this.sort_type].goodsList;

				let arr = [];
				for (let i in dat) {
					dat[i].p_height = 0;
					dat[i].p_load = false;
					dat[i].p_show = false;
					if (i % 2 == 0) {
						dat[i].p_type = 0;
					} else {
						dat[i].p_type = 1;
					}
					arr.push(dat[i]);
				}
				this.goods = arr;

			},
			/**
			 * 进入商品详情页
			 * @param {Object} item
			 */
			jumpTo(item) {

				uni.setStorage({
					key: "good",
					data: item,
					success: () => {
						uni.navigateTo({
							url: "./info?shop_id=" + this.shop_id + "&status=" + this
								.shop.status
						})
					}
				})



			},
			searchGoods() {
				uni.navigateTo({
					url: "/app/ShopCenter/pages/searchGood?shop_id=" + this.shop_id+"&status=" + this
								.shop.status
				})
			},




		}


	}
</script>

<style scoped>
	.cartBox {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 999;
	}

	/**
		 * 搜索框样式
		 */
	.search-boxes {
		width: 92%;
		margin: auto;
		height: calc(100vw*(100/750));
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		align-items: center;
		box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 20upx 30upx 20upx 30upx;
	}

	.input-search-box1 {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
	}

	.inputSearch1 {
		width: 80%;
		font-size: calc(100vw*(28/750));
		font-weight: 500;
		color: #999999;
	}

	/**
		 * 推荐商品
		 */

	.scroll-title {
		display: -webkit-box;
		white-space: normal;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		-webkit-box-orient: vertical;
		font-size: calc(100vw*(26/750));
		font-weight: 500;
		color: #333333;


	}

	.left-shop {
		position: relative;
	}

	.left-shop .text-price {
		margin-top: calc(100vw*(31/750));
		font-size: calc(100vw*(32/750));
		font-family: PingFang SC;
		font-weight: 800;
		color: #E53D3D;
	}

	.left-shop .button {
		margin-top: calc(100vw*(22/750));
		font-size: calc(100vw*(20/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.cu-tag1 {
		height: calc(100vw*(28/750));
		min-width: calc(100vw*(66/750));
		font-size: calc(100vw*(18/750));
		border-radius: 8rpx;
	}

	.shop-box {
		width: 92%;
		margin-left: 4%;
		margin-bottom: 32rpx;
	}

	.s-pass-price {
		text-decoration: line-through;

	}

	/**
		 * 筛选
		 */

	.shop-bar1 {
		width: 100%;
		min-height: calc(100vw*(39/750));
		z-index: 999;
		white-space: nowrap;
		align-items: center;
		display: -webkit-box;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
	}

	.screen {
		margin-top: calc(100vw*(30/750));
	}

	.scroll-view {
		margin-top: calc(100vw*(16/750));
		margin-bottom: calc(100vw*(16/750));
	}
	.viewLeft{
		width:calc(100vw*(40/750));
		display: inline-flex;
	}

	.shop-bar1-view {
		height: 100%;
		display: inline-flex;
		margin-right: calc(100vw*(38/750));

	}

	.shopbar2 {
		width: 96%;
		min-height: calc(100vw*(39/750));
		margin-left: 2%;
		z-index: 99;
		background: #F7F7F7;
		white-space: nowrap;
		align-items: center;
		display: -webkit-box;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
	}

	.good-nav-item {
		width: 20%;
		height: 100%;
		margin-left: 2%;
	}

	.tabnohover {
		font-size: calc(100vw*(25/750));
		font-weight: 500;
		color: #999999;

	}

	.tabhover {
		font-size: calc(100vw*(30/750));
		font-weight: 800;
		color: #333333;
	}

	.nav-fixed2 {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
</style>

<style lang="less">
	.scrollX-box {
		width: 100vw;
		margin-top: calc(100vw*(30/750));
		height: calc(100vw*(220/750));
		display: -webkit-box;
		flex-direction: row;
		white-space: nowrap;
		margin-left: 4%;
	}

	.scrollX-box1 {
		height: 100%;
		width: calc(100vw*(500/750));
		margin-right: calc(100vw*(20/750));
		border-radius: calc(100vw*(20/750));
		display: inline-flex;
		align-items: center;
		padding-left: calc(100vw*(23/750));
		padding-right: calc(100vw*(23/750));

		box-shadow: 0px 0px 40rpx 0px rgba(0, 0, 0, 0.05);
	}

	.left-shop {
		width: calc(100vw*(233/750));
		height: calc(100vw*(180/750));
		position: relative;

	}

	.right-box {
		width: calc(100vw*(180/750));
		height: calc(100vw*(180/750));
		border-radius: calc(100vw*(20/750));
	}

	.right-box image {
		width: calc(100vw*(180/750));
		height: calc(100vw*(180/750));
		border-radius: calc(100vw*(20/750));
	}

	.text-discount {
		font-size: calc(100vw*(24/750));
		font-weight: 500;
		text-decoration: line-through;
		color: #999999;
		margin-left: calc(100vw*(10/750));
	}
</style>
